/**
 * Created by xiongisxiong on 2018/4/27
 */
import React, { PureComponent } from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons' // 导入icon插件
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view' // 导入tab插件

// 引入组件：发现音乐-{个性推荐、歌单、主播电台、排行榜} 2018/5/9
import Mainscene from './MainScene' // 个性推荐
import PlaylistScene from './PlaylistScene'  // 歌单
import RadioScene from './RadioScene' // 主播电台
import TopScene from './TopScene' // 排行榜


// 引入工具
import { screen, color } from '../utils'


export default class DiscoverMusic extends PureComponent {
  static navigationOptions = ({navigation}) => ({
    headerTitle: (
      <TouchableOpacity style={styles.searchBar}>
        <Icon name='ios-search-outline' size={15} color='#ccc' />
        <Text style={{color: '#ccc'}}>搜索音乐、歌词、电台</Text>
      </TouchableOpacity>
    ),
    headerLeft: (
      <TouchableOpacity onPress={() => navigation.navigate('ModalMenu',{title:'测试'})}>
        <Icon name='ios-microphone-outline' size={30} color='#fff' style={{marginLeft:20}} />
      </TouchableOpacity>
    ),
    headerRight: (
      <TouchableOpacity onPress={() => navigation.navigate('Player',{title:'播放器'})}>
        <Icon name="ios-stats-outline" size={30} color="#ffffff" style={{marginRight: 20}} />
      </TouchableOpacity>
    ),
    headerStyle: {
      backgroundColor: color.theme
    }
  })
  render() {
    const types = [
      {title: '个性推荐', component: Mainscene},
      {title: '歌单', component: PlaylistScene},
      {title: '主播电台', component: RadioScene},
      {title: '排行榜', component: TopScene},
    ]
    return (
      // <View>
      //   <Text>发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐发现音乐</Text>
      // </View>
      <ScrollableTabView
        style={{flex: 1, backgroundColor: '#FBFCFE'}}
        tabBarBackgroundColor='#fff'
        tabBarActiveTextColor='#D43c33'
        tabBarInactiveTextColor='#000'
        tabBarUnderlineStyle={{backgroundColor: '#D43c33'}}
        renderTabBar={() => <DefaultTabBar />}
      >
        {
          types.map((item, index) => {
            const Component = item.component;
            return <Component key={index} tabLabel={item.title} navigation={this.props.navigation} />
          })
        }
      </ScrollableTabView>
    )
  }
}

const styles = StyleSheet.create({
  searchBar: {
      borderRadius: 30,
      backgroundColor: '#ffffff',
      width: screen.width / 3 * 2 ,
      height: screen.width / 12,
      alignSelf: 'center',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
  }
});